<template>
  <div class="component-allotMaterialList">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>
            <span>退料入库信息</span>
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
    </div>
    <div  class="container">
      <div>
        <div class="table-title">
          <p>
            <span class="iconfont">&#xe607;</span> 退料入库信息
          </p>
          <div class="btn-group-right">
            <span @click="save">入库</span>
          </div>
        </div>
        <div class="tables">
          <table cellpadding="0" cellspacing="0" border="1">
            <tr>
              <td>入库单号</td>
              <td>
                <el-input v-model="table.formNo" :disabled="write"></el-input>
              </td>
              <td>出库方</td>
              <td>
                <el-input v-model="table.supplierName" :disabled="write"></el-input>
              </td>
            </tr>
            <tr>
              <td>仓储位置</td>
              <td>
                <el-select v-model="table.toStoreid" clearable placeholder="请选择仓储位置" style="margin-left: -62px;width:320px;">
                  <el-option v-for="(item,index) in locationList" :key="index" :label="item.storeName" :value="item.storeId"></el-option>
                </el-select>
              </td>
              <td>发货人</td>
              <td>
                <el-input v-model="table.consigner" :disabled="write"></el-input>
              </td>
            </tr>
            <tr>
              <td>签收单据</td>
              <td>
                <el-upload
                  class="upload-demo"
                  action="/api/web/sysFile/uploadFile"
                  :headers="myheader"
                  :data="exe_data"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="successFile"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="1"
                  accept=".jpg,.png,.JPG,.PNG"
                  :before-upload="beforeAvatarUpload"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="small" type="primary">上传文件</el-button>
                  <div slot="tip" style="color: #ccc;" class="el-upload__tip">只能上传jpg/png文件，且不超过10MB</div>
                </el-upload>
              </td>
              <td>领料人</td>
              <td>
                <el-input v-model="table.responseUser" placeholder="请输入领料人"></el-input>
              </td>
            </tr>
             <tr>
               <td>项目编码</td>
               <td>
                 <el-input v-model="table.fromProno" :disabled="write"></el-input>
               </td>
               <td>发货日期</td>
               <td style="height: 40px;">
                 {{table.receiveDate | timeFilter}}
               </td>
             </tr>
          </table>
        </div>
      </div>
      <div style="margin-top:20px;">
        <div class="table-title table-titles">
          <p>
            <span class="iconfont">&#xe607;</span> 材料清单
          </p>
          <p v-show="$route.query.flag == 1">+ 添加</p>
        </div>
        <div class="table armorlistTable">
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            :data="materialList"
            style="width: 1100px;margin:0 auto"
            border
          >
            <el-table-column label="序号" align="center" width="70" type="index"></el-table-column>
            <el-table-column label="器材名称" align="center" prop="matName"></el-table-column>
            <el-table-column label="型号" align="center" prop="matModel"></el-table-column>
            <el-table-column label="设备码" align="center" prop="deviceNum"></el-table-column>
            <el-table-column label="单位" align="center" prop="matUnit"> </el-table-column>
            <el-table-column label="数量" align="center" prop="realNum"></el-table-column>
            <el-table-column label="单价" align="center" prop="price"></el-table-column>
            <el-table-column label="金额" align="center">
              <template slot-scope="scope">
                {{scope.row.realNum*scope.row.price | numFilter}}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myheader:{token:localStorage.getItem("token")},
        table:{}, // 可编辑表格数据
        materialList:[],//材料列表
        locationList:[],//仓储位置列表
        write: true,// 是否可编辑
        total: 2,// 数据总条数
        exe_data:{'parentId':this.$route.params.inId,'bizType':'project.inStore'},
        fileList: [],
        imgFlag:false,
        newArray:{},//选中的领料施工队
        delFile:'',
      };
    },
    mounted(){
      this.detailInit();
      this.selectLocation();
//     0-入库  1-查看详情
      /*  if(this.$route.query.flag == 1){
       this.detailInit();
       }else{
       this.write = false;
       this.selectLocation()
       this.selectList();
       }*/
    },
    methods: {
      //详情查询
      detailInit(){
        let that = this;
        let suCb = function(res){
          that.table=res.data.data.map;
          that.materialList = res.data.data.list;
          console.log(res.data.data)
        }
        let erCb = function(res){
          console.log(res)
        }
        let palyParam = {
          url: "/api/web/proOutStore/getToBeConfirmedFormDetails",
          methods:'post',
          data: {outId:that.$route.params.id},
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      //领料施工队获取选择的信息
      save() {
        if(this.table.toStoreid==""||this.table.toStoreid==undefined||this.fileList.length==0||this.table.responseUser==''||this.table.responseUser==undefined){
          this.$alert('仓储位置、签收单据、领料人不能为空', '提示', {
            confirmButtonText: '确定',
          });
          return false;
        }
        let that = this;
        let suCb = function(res){
          that.$router.push({name:'salesreturn'});
          console.log(res.data)
        };
        let erCb = function(res){
          console.log(res)
        };
        let postData = {
          outId: that.$route.params.id,
          proInStore: {
            inId:that.$route.params.inId,
            formNo: that.table.formNo,
            formType: that.table.formType,
            supplierName: that.table.supplierName,
            toStoreid:that.table.toStoreid,
            receiveDate: that.table.receiveDate,
            responseUser:that.table.responseUser,
            consigner:that.table.consigner,
            fromProno:that.table.fromProno
          },
          list: that.materialList,
        };
        let palyParam = {
          url: "/api/web/proInStore/addToBeConfirmedInStoreMaterial",
          methods:'post',
          data: postData,
          success: suCb,
          error: erCb,
        }
        that.$https(palyParam)
      },
      //选择仓储位置
      selectLocation(){
        let that = this;
        let suCb = function(res){
          that.locationList = res.data.data;
          console.log(res.data.data)
        };
        let erCb = function(res){
          console.log(res)
        };
        let palyParam = {
          url: "/api/web/sysStore/selectStoreName",
          methods:'post',
          data:{},
          success: suCb,
          error: erCb,
        };
        that.$https(palyParam)
      },
      //文件上传
      handleRemove(file, fileList) {
        if(file.status == "success") {
          let that = this;
          let suCb = function(res){
            that.fileList=[]
          }
          let erCb = function(res){
            console.log(res)
          }
          let postData = {
            parentId:that.$route.query.outId,
            fileUrl:that.delFile
          }
          let palyParam = {
            url: "/api/web/sysFile/deleteFile",
            methods:'post',
            data: postData,
            success: suCb,
            error: erCb,
          }
          that.$https(palyParam)
        }else{
          this.fileList=[]
        }
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，请先删除再上传`);
      },
      beforeRemove(file, fileList) {
        return true;
//        return this.$confirm('确认删除吗？');
      },
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 10;
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 10MB!');
        }
        return isLt2M;
      },
      successFile(response, file, fileList){
        this.delFile = file.response.fileUrl;
        this.fileList = fileList;
      },
    }
  };
</script>

<style scoped>
  .container {
    width: 1100px;
    margin: 30px auto;
  }
  .table-titles{
    overflow: hidden;
    background: #F3F3F3;
    border:1px solid #E4E4E4;
    border-bottom: none;
    padding: 0 10px;
  }
  .table-titles p:first-of-type{
    float: left;
  }
  .table-titles p:last-of-type{
    float: right;
    border:1px solid #ccc;
    background: #fff;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    margin-top: 5px;
    cursor: pointer;
  }
  .table-title p {
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    font-size: 16px;
    color: #666;
    text-align: left;
    line-height: 40px;
  }

  .tables table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 12px;
  }
  .tables table td:nth-of-type(2n + 1) {
    text-align: right;
    padding-right: 20px;
    width: 140px;
    background: #f9fafc;
  }

  .table-title > div:last-of-type {
    float: right;
    margin: -45px 20px 10px;
  }
  .table-title > div:last-of-type span {
    display: inline-block;
    margin-left: 20px;
    padding: 5px 20px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 4px;
  }
  .table-title > div:last-of-type span:first-of-type {
    border: 1px solid #e4e4e4;
    color: #666;
    background: #fff;
  }
  .table-title > div:last-of-type span:last-of-type {
    border: 1px solid #1abc9c;
    color: #fff;
    background: #1abc9c;
  }

  .uploadBtn{
    height: 26px;
    line-height: 26px;
    margin: 7px;
    width: 90px;
    color: #1abc9c;
    border: 1px solid #1abc9c;
    background-color: #fff;
  }
  .uploadBtn:hover{
    color: #fff;
    background-color: #1abc9c;
  }
  a{
    color: #1ABC9C;
    cursor: pointer;
  }
  /* 弹窗样式 */
  .model-input {
    width: 190px;
    height: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    color: #ccc;
  }

  .input-box {
    margin-bottom: 100px;
  }
  .search {
    width: 40px;
    height: 30px;
    border: 1px solid #ccc;
    border-left: none;
    line-height: 30px;
    background-color: #ccc;
  }
  .search:hover {
    cursor: pointer;
  }

  .radio-group {
    padding-top: 30px;
    padding-left: 30px;
  }

  .radio-group .el-radio {
    height: 30px;
  }

  .addpro {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #ccc;
  }
  .addpro:hover {
    cursor: pointer;
  }

  .upload:hover {
    cursor: pointer;
  }

  .btn-search {
    display: inline-block;
    float: right;
    width: 80px;
    height: 40px;
    background-color: #1abc9a;
    margin-top: 50px;
    color: #fff;
    border-radius: 5px;
    font-size: 15px;
    line-height: 40px;
  }
  .btn-search:hover {
    cursor: pointer;
  }

  .el-table .cell a {
    color: #1abc9a;
    text-decoration: none;
    cursor: pointer;
  }
  .checkbox{
    text-align: left;
    margin: 20px 0;
  }
  .component-paging .table-bottom{
    width: 102% !important;
    margin-top: 30px;
    border:none;
  }

</style>
